<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column width="80" label="图片">
        <el-image :src="imgUrl"></el-image>
      </el-table-column>
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="details" label="描述" width="220"></el-table-column>
      <el-table-column prop="cat_sort" label="种类" width="150"></el-table-column>
      <el-table-column prop="price" label="价格" width="150"></el-table-column>
      <el-table-column prop="sale_count" label="销售量" width="150"></el-table-column>
      <el-table-column prop="memo" label="地址" width="150"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-chat-line-square" @click="details(scope.row)">详情</el-button>
          <el-button type="success" icon="el-icon-shopping-cart-2" @click="addCars(scope.row)">添加购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  const axios = require('axios');
  import cat1_1 from '../assets/cat1/布偶猫1.jpg'
  import cat2_1 from '../assets/cat2/加菲猫1.jpg'
  import cat3_1 from '../assets/cat3/英短1.jpg'

  export default {
    data() {
      return {
        tableData: null,
        imgUrl: cat1_1
      }
    },
    methods: {
      details(row) {
        this.$router.push({
          path: '/details',
          query: {
            id: row.id
          }
        });
        console.log('tests test  id:' + row.id)
      },
      addCars(row) {
        //获取登录名传参
        const loginName = cookie.get('loginName')
        const _this = this
        console.log('cat_id:' + row.id + '  登录名:' + loginName)
        axios.post('http://localhost:9000/cars/add/' + row.id + '/' + loginName).then(function (resp) {
          if (resp.data == 'success') {
            console.log('成功添加到购物车11')
            _this.$message({
              type: 'success',
              message: '成功添加'
            })
          } else {
            return false;
          }
        });
      }
    },
    created() {
      const _this = this
      this.$axios.get('http://localhost:9000/cat/findCat/' + '加菲猫').then(function (resp) {
        console.log(resp.data)
        _this.tableData = resp.data
        _this.imgUrl = require('../assets/cat2/加菲猫3.jpg')
      })
    }
  }
</script>

<style>

</style>
